<template>
	<view class="my-add-path">

		<view class="path-item">
			<view>收 件 人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="obj.name" />
		</view>

		<view class="path-item">
			<view>手 机 号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="obj.tel" />
		</view>

		<view class="path-item">
			<view>所在地区</view>
			<view @tap="showCityPicker()" class="city">{{pathCity}}<span class="iconfont icon-youjiantou"></span></view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"
				:themeColor="color"></mpvue-city-picker>
		</view>

		<view class="path-item">
			<view>详细地址</view>
			<input type="text" value="" placeholder="5-60个字符" v-model="obj.details" />
		</view>

		<view class="path-item">
			<view>设为默认地址</view>
			<radio-group @tap='changeRadio()'>
				<label class="radio">
					<radio value="" color="red" :checked="obj.isDefault ==1? true:false" /><text></text>
				</label>
			</radio-group>
		</view>



	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import $http from "@/common/api/request.js"
	import mpvueCityPicker from '@/component/uni/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		data() {
			return {
				obj: {
					id:'',
					name: '',
					tel: '',
					province: '',
					city: "",
					district: "",
					address: '',
					isDefault: false
				},
				i: -1,
				isStatus: false,
				color: "#49BDFB ",
				pickerValueDefault: [0, 0, 1]
			}
		},
		components: {
			mpvueCityPicker,
		},
		computed: {
			pathCity() {
				if (this.obj.province) {
					return `${this.obj.province}-${this.obj.city}-${this.obj.district}`
				} else {
					return '请选择';
				}
			}
		},
		onLoad(e) {
			if (e.data) {
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
				let result = JSON.parse(e.data);
				this.obj = result.item;
				this.obj.id=result.item.id;
				this.i = result.index
				this.isStatus = true;
			}
		},
		onNavigationBarButtonTap() {
			if (this.isStatus) {
				// 修改
				this.obj.isDefault = this.obj.isDefault == true ? 1 : 0;
				$http.request({
					url: "/updataAddress",
					method: "POST",
					header: {
						token: true
					},
					data: {
						obj: {
							obj:{...this.obj}
						}
					}
				}).then((res) => {
					this.createPathFn(this.obj)
					uni.showToast({
						title:res.msg
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
					
				}).catch(() => {})
				this.updataPathFn({
					index: this.i,
					item: this.obj
				})
				uni.navigateBack({
					delta: 1
				})
			} else {
				// 新增
				this.obj.isDefault = this.obj.isDefault == true ? 1 : 0;
				$http.request({
					url: "/addAddress",
					method: "POST",
					header: {
						token: true
					},
					data: {
						obj:{...this.obj}
					}
				}).then((res) => {
					this.createPathFn(this.obj)
					 uni.showToast({
					 	title:res.success
					 })
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)

				}).catch(() => {})
			}
		},
		methods: {
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				let arr = e.label.split("-");
				this.obj.province = arr[0];
				this.obj.city = arr[1];
				this.obj.district = arr[2];
			},
			changeRadio() {
				this.obj.isDefault == 1 ? true : false;
				this.obj.isDefault = !this.obj.isDefault
			},
			...mapActions(['createPathFn', 'updataPathFn']),

		}
	}
</script>

<style scoped>
	.my-add-path {
		padding-left: 20rpx;
	}

	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #f7f7f7;
	}

	.path-item input {
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}

	.city {
		padding-left: 80rpx;
	}
</style>